<template>
  <div class="container-box">
    <div class="form-box">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-position="right"
        label-width="120px"
        class="demo-ruleForm"
      >
        <h3 class="title">請連接網盤</h3>
        <el-form-item prop="account" label="當前帳號">
          <el-input v-model="ruleForm.account" placeholder="請輸入當前帳號" readonly clearable></el-input>
        </el-form-item>
        <el-form-item prop="privateKey" label="私鑰">
          <el-input v-model="ruleForm.privateKey" placeholder="請輸入私鑰" clearable></el-input>
        </el-form-item>
        <el-form-item prop="dishLocation" label="光盤路徑地址">
          <el-input v-model="ruleForm.dishLocation" placeholder="請輸入光盤路徑地址" clearable>
            <el-button slot="append" icon="el-icon-folder-opened" @click="onChoosePath"></el-button>
          </el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: center;">
        <el-button type="primary" size="medium" @click="onGetNetdisk" class="next" :loading="loading">提交</el-button>
      </div>
    </div>
    <div class="clear"></div>
    <div v-if="dataList.length" class="form-box">
      <el-descriptions v-for="(item,index) in dataList" :key="index" class="margin-top" :title="index == 0 ? '數據列表' : ''" :column="4" border>
        <el-descriptions-item label="創建時間">
          {{ item.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="緯度">
          {{ item.latitude }}
        </el-descriptions-item>
        <el-descriptions-item label="經度">
          {{ item.longitude }}
        </el-descriptions-item>
        <el-descriptions-item label="地址">
          {{ item.address }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import { timestampToTime } from '@/utils/tools'

export default {
  name: 'gps-index',

  data() {
    return {
      loading: false,
      ruleForm: {
        privateKey: '',
        dishLocation: '',
        account: ''
      },
      dataList: []
    }
  },

  created() {
    let user = sessionStorage.getItem('user')
    if (user) {
      user = JSON.parse(user)
      this.ruleForm.account = user.account || ''
    }
  },

  methods: {

    //获取离线gps数据
    onGetNetdisk() {
      this.loading = true
      this.$store.dispatch('gps/fetchOfflineGPS', this.ruleForm).then(res => {
        console.log('获取离线gps数据')
        console.log(res)
        this.dataList = res.result
        this.loading = false
        this.$message.success(res.message)
      }).catch(err => {
        this.loading = false
        this.$message.error(err || '獲取失敗')
        return false
      })
    },

    //选择文件路径
    onChoosePath() {

    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/css/them.scss";
.container-box {
  .el-steps {
    margin: 50px 0;
  }

  .next {
    margin: 0 auto;
  }

  .form-box {
    width: 800px;
    padding: 10px 50px;
  }

  .clear:after{
    content: '.';
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
  }
}
</style>
